<template>
    <el-select placeholder="产品线"
               v-model="current"
               v-bind="$attrs"
                style="display: inline-block">
        <el-option-group
            v-for="group in $data.groups"

            :key="group.name"
            :label="group.name">
            <el-option
                v-for="item in group.items"
                :key="item.code"
                :label="item.name"
                :value="item.code">
                <div style="display: flex;justify-content: space-between;">
                    <span style="color: #ff9c01;margin-right:10px;">{{ item.code || '[全局]'}}</span>
                    <span style="">{{ item.name }}</span>
                </div>

            </el-option>
        </el-option-group>

    </el-select>
</template>
<script setup>
/**
 * Created by CodeGenerator  at 2022-09-07 13:54:56
 */




defineOptions({
    name: "product-line",
    inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();

//定义data
const $data = reactive({ groups : [],  db_rows : [],  version : 1});

const $props = defineProps({
    language: {type: String, default: ""}
})
const $model = defineModel({ type: String });
const $emit = defineEmits(["update:modelValue","proc","change"])
const list = ref();

const loadData = function () {
    if ($props.language in top.jv.productLines) {
        $data.db_rows = top.jv.productLines[$props.language];
        $emit("proc", $data.db_rows);
        return Promise.resolve();
    }
    return jv.$http.post("/dev/git-data/list-product-line?language=" + $props.language).then(res => {
        $data.db_rows = res.data.data;
        top.jv.productLines[$props.language] = res.data.data;
        $emit("proc", $data.db_rows);
    });
};
const sortWithLastProjectCodes = function (code) {
    code = code || current;
    var last = localStorage.getJson("last-product-lines") || [];
    last = last.filter(it => it).distinct().slice(0, 12);
    if ($data.db_rows.some(it => it.code == code)) {
        last.removeItem(code);
        last.insertAt(0, code)
        last = last.slice(0, 24)
        localStorage.setJson("last-product-lines", last)
    }
//这样能保存是 last 的顺序。
    var p1 = last.map(c => $data.db_rows.find(it => it.code == c)).filter(it => it);
    var p2 = $data.db_rows.filter(it => !last.includes(it.code));
    p2 = p2.sort((a, b) => a.code > b.code ? 1 : -1);
    $data.groups = [{name: "最近使用(时间倒排)", items: p1}, {name: "默认(code排序)", items: p2}]
};
const product_change = function (v) {
    $emit("update:modelValue", v);
    $emit("change", v, $data.db_rows.find(it => it.code == v));
};

const current = $computed({
    get() {
        return $model.value;
    },
    set(v) {
      sortWithLastProjectCodes();
        $emit("update:modelValue", v);

        var m = $data.db_rows.find(it => it.code == v)
        $emit("change", v, m);
    }
});


watch(()=> $props.language,v=>{
    $data.db_rows = [];

    top.jv.productLines = top.jv.productLines || {};

    loadData().then(() => {
        sortWithLastProjectCodes();
    })
},{immediate:true})


</script>
